<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>vue列表添加动画</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		[v-cloak] {
			display: none;
		}

	</style>
</head>
<body>
	<div id="app" v-cloak>
		
		<a href="https://v2.cn.vuejs.org/v2/guide/custom-directive.html">参考资料</a>
		<br>
		<input v-focus/>
		<br>
		<button v-cs="'112312'">测试</button>
		<br>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.6.8/vue.min.js"></script>
	<script>
		// 全局指令
		Vue.directive('focus', {
			inserted: function (el) {
				el.focus();
			}
		})

		var app = new Vue({
			el: '#app',
			
			// 局部指令
			directives: {
				cs: {
					inserted: function (el, data) {
						el.addEventListener('click', () => {
							console.log(data.value);
						})
					}
				}
			}
		})

	</script>
</body>	
</html>